<template>
  <div class="box">
    <el-form
      :rules="rules"
      status-icon
      label-width="100px"
      class="demo-ruleForm"
      ref="user"
      :model="user"
    >
      <el-form-item label="管理账户">
        <span style="font-size: 20px">{{
          this.$store.state.username
        }}</span></el-form-item
      >
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input
          type="password"
          autocomplete="off"
          style="width: 30%"
          v-model="user.oldPassword"
          @focus="getPwd"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          type="password"
          autocomplete="off"
          style="width: 30%"
          v-model="user.newPassword"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="rePassword">
        <el-input
          type="password"
          autocomplete="off"
          style="width: 30%"
          v-model="user.rePassword"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="" type="primary" @click="confirm">确认修改</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import axios from "axios";
import { changePwd, getPwd } from "@/api/";
export default {
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入旧密码"));
      } else if (value !== this.truePWd) {
        callback(new Error("旧密码输入错误"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.user.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      user: {
        truePWd: "",
        oldPassword: "",
        newPassword: "",
        rePassword: "",
      },
      rules: {
        oldPassword: [
          { required: true, validator: validatePass1, trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        rePassword: [
          { required: true, validator: validatePass3, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getPwd() {
      let { data } = await getPwd();
      this.truePWd = data.password;
    },
    confirm() {
      this.$refs.user.validate(async (valid) => {
        if (valid) {
          let { data } = await changePwd({
            newPwd: this.user.rePassword,
          });
          let { code, message } = data;

          if (code === 20000) {
            this.$message({
              message,
              type: "success",
            });

            // sessionStorage.removeItem("token");
            this.$store.commit("delToken");
            this.$store.commit("delUser");
            this.$router.replace("/login");
          }
          this.user.oldPassword = "";
          this.user.newPassword = "";
          this.user.rePassword = "";
        } else {
          return false;
        }
      });
    },
    reset() {
      this.$refs.user.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 95%;
  height: 95%;
  background: #fff;
}
</style>